@use './vars.scss';
@use './mixins.scss';
@use './transition.scss';
@use './colors.scss';

body {
  font-size: $size-common;
  color: $text-common;
  margin: 0;
}
html.light {
  body {
    background-color: #fff !important;
  }
}
html.dark {
  body {
    background-color: #1b2f4f !important;
  }
}

/** 弹窗公共样式 begin **/
.el-dialog {
  max-width: 1400px;
  margin-top: 0 !important;
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  .el-dialog__header {
    position: relative;
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    text-align: left;
    margin-right: 0;
    padding: 0px 20px 0px 30px !important;
    border-radius: 12px 12px 0 0;
    background-color: $dialog-header-bg;
    border-bottom: 1px solid $dialog-header-border;
  }

  .el-dialog__headerbtn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: $size-common;
    width: 14px;
    height: 14px;
    .el-icon {
      color: $dialog-header-text;
      &:hover {
        color: rgba($dialog-header-text, 10%);
      }
    }
  }

  .el-dialog__title {
    font-size: $size-common;
    color: $text-common;
    font-weight: 550;
  }

  .el-dialog__body {
    border-radius: 0 0 12px 12px;
    padding: 30px !important;
    min-height: 100px;
    max-height: 750px;
    background-color: $dialog-body-bg;
  }

  .dialog-footer {
    text-align: right;
    padding: 0px;
    margin-top: 8px;
    .el-button + .el-button {
      margin-left: 20px;
    }
  }

  .dialog-footer-view {
    text-align: right;
    padding: 0px;
    margin-top: 30px;
  }
}
/** common custom message确认框 begin **/
.el-message-box,
.el-message-box.custom-msgbox,
.el-message-box.common-msgbox {
  padding-bottom: 0;
  border-radius: 12px;
  background-color: $dialog-body-bg;
  border: none;
  .el-message-box__header {
    position: relative;
    height: 50px;
    line-height: 50px;
    padding: 0px 20px 0px 30px !important;

    display: flex;
    align-items: center;
    text-align: left;
    margin-right: 0;
    background-color: $dialog-header-bg;
    border-bottom: 1px solid $dialog-header-border;
    .el-message-box__title {
      font-weight: 550;
    }
    .el-message-box__headerbtn {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: $size-common;
      width: 14px;
      height: 14px;
      .el-icon {
        color: $dialog-header-text;
        &:hover {
          color: rgba($dialog-header-text, 10%);
        }
      }
    }
  }
  .el-message-box__content {
    padding: 30px;
    color: $dialog-msgbox-text;
    .el-message-box__status {
      font-size: $size-18 !important;
      color: $bg-warning;
    }
    .el-message-box__status + .el-message-box__message {
      padding-left: 34px;
      padding-right: 0;
    }
  }
  .el-message-box__btns {
    padding: 0 30px 30px 30px;
    .el-button + .el-button {
      margin-left: 20px;
    }
  }
}

/** common custom message确认框 end **/
/** 特殊的卡片式message确认框 begin **/
.el-message-box.card-msgbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 2px 6px 1px $custom-msg-boxshadow;
}
/** 特殊的卡片式message确认框 end **/
/** 日期选择器样式补充 begin **/
.el-date-editor .el-range-separator {
  width: 20px !important;
}

/* 高级搜索和普通搜索的组件通用样式 begin */
.search-box,
.advanced-box {
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 200px !important;
  }

  .el-date-editor--monthrange.el-input,
  .el-date-editor--monthrange.el-input__inner {
    width: 300px !important;
  }

  .el-date-editor--daterange.el-input,
  .el-date-editor--daterange.el-input__inner,
  .el-date-editor--timerange.el-input,
  .el-date-editor--timerange.el-input__inner {
    width: 350px !important;
  }

  .el-date-editor--datetimerange.el-input,
  .el-date-editor--datetimerange.el-input__inner {
    width: 400px !important;
  }

  .el-input,
  .el-select {
    min-width: auto !important;
    width: 200px !important;
  }
}

/* 列表上方搜索框 begin*/
.search-box {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  width: 100%;
  margin-bottom: 20px;
  .search-icon:hover {
    cursor: pointer;
    color: $text-primary;
  }
  .el-input__suffix .el-icon-search {
    cursor: pointer;

    &:hover {
      color: $text-primary;
    }
  }

  &-left {
    float: left;
    > div {
      display: inline-block;
    }

    .el-input,
    .el-select,
    .el-date-editor {
      margin-right: 20px;
    }

    .el-form-item {
      margin-right: 0 !important;
      margin-bottom: 18px !important;
    }
    .el-button + .el-button {
      margin-left: 20px;
    }
  }

  &-right {
    float: right;
    display: grid;
    grid-gap: 10px;
    grid-auto-flow: column;
  }
}

/* 列表 begin*/
.table-list {
  height: calc(100% - 32px - 20px) !important;
}

/* 列表头部按钮组 */
/* 表格表头通用样式 */
.el-table tr:hover {
  background-color: $table-bg-hover;
}
// 最后一行的第一列和最后一列加上border-radius解决模糊问题
.el-table__row:last-child {
  .el-table__cell:first-child {
    border-bottom-left-radius: 12px;
  }
  .el-table__cell:last-child {
    border-bottom-right-radius: 12px;
  }
}
// 表头table组件样式
.el-table th.el-table__cell,
.el-table thead.is-group th.el-table__cell {
  background-color: $table-header-bg;
  color: $table-thead-text;
}
// 有max-height属性的表格样式
.el-table--fluid-height {
  border-bottom: 1px solid $table-border;
}

.el-table__fixed-right::before,
.el-table__fixed::before {
  height: 0 !important;
}

.el-table--border::after,
.el-table--group::after {
  width: 0 !important;
}
.el-table__empty-block {
  width: calc(100% - 2px) !important;
}
// 固定列之后的头部颜色
.el-table.is-scrolling-none th.el-table-fixed-column--left,
.el-table.is-scrolling-none th.el-table-fixed-column--right {
  background-color: $table-header-bg;
}
// 固定之后的背景色
.el-table__header-wrapper tr td.el-table-fixed-column--left,
.el-table__header-wrapper tr td.el-table-fixed-column--right,
.el-table__header-wrapper tr th.el-table-fixed-column--left,
.el-table__header-wrapper tr th.el-table-fixed-column--right,
.el-table__body-wrapper tr td.el-table-fixed-column--left,
.el-table__body-wrapper tr td.el-table-fixed-column--right,
.el-table__body-wrapper tr th.el-table-fixed-column--left,
.el-table__body-wrapper tr th.el-table-fixed-column--right,
.el-table__footer-wrapper tr td.el-table-fixed-column--left,
.el-table__footer-wrapper tr td.el-table-fixed-column--right,
.el-table__footer-wrapper tr th.el-table-fixed-column--left,
.el-table__footer-wrapper tr th.el-table-fixed-column--right {
  background-color: transparent;
}
/* 列表 end*/
/* 滚动条  begin*/
.scroll-box {
  .el-scrollbar {
    width: calc(100% + 25px);
  }

  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
}

.scroll-width {
  width: calc(100% - 25px);
}

.el-scrollbar__bar.is-vertical {
  width: 4px !important;
}

/*  滚动条  end */

/* 详情样式begin */
.form-view {
  // 用div等其他标签写详情页面时
  .form-item {
    padding: 2px 0;
  }

  .label {
    color: $text-secondary;
    line-height: 24px;
    padding-right: 12px;
  }

  .value {
    line-height: 24px;
  }

  // 用elementui的form表单写详情页面时
  .el-form-item__label {
    color: $text-secondary;
  }

  :deep(.el-form-item--small.el-form-item) {
    padding: 2px 0;
  }

  :deep(.el-form-item--small .el-form-item__content),
  :deep(.el-form-item--small .el-form-item__label) {
    line-height: 24px;
  }

  .el-scrollbar__wrap {
    overflow-x: hidden !important;
    overflow-y: scroll;
    margin-bottom: 0px !important;
  }
}

/* 详情样式end */

// 分割线
.divide-line {
  height: 1px;
  width: 100%;
  background-color: $border-light;
}
/* 滚动条 begin */
::-webkit-scrollbar {
  width: 5px;
  height: 7px;
}

// 设置滚动条的背景色和圆角
::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 8px;
}

*:hover::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
}
/* 滚动条 end */

/* textarea数字统计样式修改 begin */
.el-textarea .el-input__count {
  background: transparent;
}

/* textarea数字统计样式修改 end */
.ls-icon-plus {
  color: $text-primary;
}

.ls-icon-minus {
  color: $text-primary;
}

.ls-icon-close {
  color: $text-primary;
}

/* notification 右上角成功/错误提示 start */
.el-notification {
  .el-notification__content {
    margin-top: 0;
  }
}
/* notification 右上角成功/错误提示 end */
div.el-popover {
  padding: 30px;
}
/* 时间线样式 begin */
.el-timeline-item__wrapper {
  top: 0 !important;
}
/* 时间线样式 end */
/* 树组件样式 begin */
.ls-view-tree {
  .el-tree-node__expand-icon {
    font-size: $size-large;
  }
}

.ls-view-tree {
  .el-tree-node__expand-icon.is-leaf {
    color: transparent !important;
  }
  .search-box {
    margin-bottom: 0px;
    height: auto;
  }
}
/* 树组件样式 end */

/* 上传组件样式 begin */
.el-upload__tip {
  font-size: $size-common;
  color: $text-secondary;
  margin: 5px 0 10px 0 !important;
}
/* 上传组件样式 end */
/* 表单边框 begin */
.form-card {
  width: 100%;
  border: 1px solid $border-light;
  border-radius: $radius-large;
  margin-top: 14px;
  padding: 30px;
  padding-right: 71px;
  position: relative;
  > .action-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 30px;
  }
}
/* 表单边框 end */

/* 提示文字 begin */
.ls-table .el-popper {
  max-width: 300px;
}
/* 提示文字 end */
/* 按钮 begin*/
.el-button:focus-visible {
  outline: none; // focus状态下的outline不展示
}
/* 提示文字 end */

/* popover弹出框 begin*/
.el-popover.el-popper {
  .el-button + .el-button {
    margin-left: 20px;
  }
  background-color: $bg-page !important;
  .el-popper__arrow {
    display: none;
  }
}
html.dark {
  .advanced-popper {
    box-shadow: 0px 0px 12px 1px rgba(218, 231, 255, 0.15);
  }
}
/* popover弹出框 end*/

/* ls-text-form 车牌中心轴线对齐 begin */
.ls-text-form {
  .car-block {
    transform: translateY(2px);
  }
}
/* ls-text-form 车牌中心轴线对齐 end */
/* collapse end*/
.el-collapse {
  border-top: none !important;
}
/* collapse end*/
